<template>
  <view class="TeacherProfile">
    <view class="text-black text-sm padding-sm">{{ !isFilledData ? '请认真填写资料' : '如需修改，请认真填写后提交' }}</view>
    <cu-form ref="profileForm">
      <view class="form-group">
        <cu-input name="TEACHERNAME" title="真实姓名" required placeholder="请输入真实姓名"/>
      </view>

      <view class="form-group">
        <cu-input type="number" name="TEACHERNO" title="教师编号" required placeholder="请输入学号"/>
      </view>


      <view class="form-group">
        <cu-picker name="MAJOR_ID" title="专业ID" :options="majorOpts" required placeholder="请选择专业ID"/>
      </view>

      <view class="form-group">
        <cu-input type="number" name="PHONENO" title="联系电话" required placeholder="请输入联系电话"/>
      </view>

      <view class="form-group">
        <cu-radio name="SEX" title="性别" :options="sexOpt"/>
      </view>

      <view class="padding">
        <button @tap="onSubmitProfile" class="cu-btn bg-blue block lg round shadow margin-top-lg">保存提交</button>
      </view>
    </cu-form>
  </view>
</template>

<script lang="ts" setup>
import CuInput from '../../components/cu-input/index.vue'
import CuPicker from '../../components/cu-picker/index.vue'
import CuRadio from '../../components/cu-radio/index.vue'
import CuForm from '../../components/cu-form/index.vue'
import {useProfileArgs} from "./useProfileArgs";
import {onMounted, ref} from "vue";
import {useStore} from "vuex";
import {getUserData, modifyTeacherData} from "../../api/manage";
import {useLogin} from "../account/useLogin";
import {useMajorList} from "./useMajorList";

const profileForm = ref<any>(null)
const {state, commit} = useStore()
const {CUSER_ID, USERNO, USERNAME} = state.user.userInfo
const {isFilledData} = useLogin()
const {sexOpt} = useProfileArgs([
  {
    CSNAME: '性别',
    key: 'sexOpt'
  }
]).opts

const {majorOpts} = useMajorList()

onMounted(() => {

  if (!isFilledData.value){
    uni.setNavigationBarTitle({
      title: '完善个人资料'
    })
  }

  getUserData(CUSER_ID).then(res => {
    if (res.ERROR[0].errcode == '0'){
      if (res.DAT.length > 0){
        profileForm.value.setFields(['TEACHERNAME','TEACHERNO','MAJOR_ID','PHONENO'].map(name => ({
          value: res.DAT[0][name] || '',
          name
        })))

        profileForm.value.setFields([
          {
            value: res.DAT[0]['SEX'] || sexOpt[0].value,
            name: 'SEX'
          }
        ])
      }
    }else {
      uni.showToast({
        title: res.ERROR[0].error,
        icon: 'none',
        mask: true
      })

    }
  }).catch(err => {
    uni.showToast({
      title: '获取资料失败',
      icon: 'error',
      mask: true
    })
    // setTimeout(() => {
    //   uni.navigateBack()
    // },500)
  })
})

function onSubmitProfile() {
  (profileForm.value.submit() as Promise<any>).then(async (values) => {
    const {TEACHERNAME, TEACHERNO, MAJOR_ID, PHONENO, SEX} = values
    const modifyRes = await modifyTeacherData({
      TEACHERNAME,
      TEACHERNO,
      MAJOR_ID,
      PHONENO,
      SEX,
      CUSER_ID,
      USERNO,
      USERNAME,STATE: 1,
      OPERATOR_ID: CUSER_ID
    })

    if (modifyRes.ERROR[0].errcode == '0'){
      commit('HAS_FILLED_DATA', true)
      uni.showToast({
        title: '提交成功',
        icon: "success",
        mask: true
      })
	 commit("SET_USERINFO",true)
      setTimeout(() => {
        uni.navigateBack()
      },500)
    }else {
      uni.showToast({
        title: modifyRes.ERROR[0].error,
        icon: "none",
        mask: true
      })
    }
  }).catch(err => {
    uni.showToast({
      title: '请完善相关资料后再提交',
      icon: 'none',
      mask: true
    })
  })
}

</script>

<style scoped lang="scss">
.TeacherProfile {
  box-sizing: border-box;
  padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
  padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
  form {
    .form-group + .form-group {
      border-top: 1 upx solid #eee;
    }
  }
}
</style>
